/*
  学习目标：React创建元素-练习
  步骤：
     1. 导包react react-dom
     2. 创建react元素
     3. 渲染react元素
*/

import React from 'react';
import ReactDOM from 'react-dom';

const title = React.createElement(
  'div',
  // 💥 class在js中属于关键字, class作为属性名, 改为className
  { id: 'box', className: 'demo' },
  'hello React'
);

const liNode1 = React.createElement('li', null, '香蕉1');
const liNode2 = React.createElement('li', null, '香蕉2');
const liNode3 = React.createElement('li', null, '香蕉3');

const ulNode = React.createElement(
  'ul',
  { className: 'list' },
  liNode1,
  liNode2,
  liNode3
);

// 💥 ReactDOM.render() 全局只能调用一次
// ReactDOM.render(title, document.getElementById('root'));
ReactDOM.render(ulNode, document.getElementById('root'));
